<template>
    <div class="center">
        <div class="quest-form">
            <form action="" class="edit-form">
                <questtitle></questtitle>
                <questtext></questtext>
                <transition-group name="questionList" tag="div">
                    <questbox v-for="(item, index) in this.$store.state.question[this.$route.query.index].questions" :index="index" :key="item"></questbox>
                </transition-group>
            </form>
        </div>
    </div>
</template>

<script>
import questtitle from './questtitle.vue'
import questtext from './questtext.vue'
import questbox from '../questmode/questbox.vue'
import store from '../../store'

export default {
    store,
    components: {
        questtitle,
        questbox,
        questtext
    },
    data(){
        return {
            
        }
    },
    methods: {
        
    },
    computed: {

    },
    watch: {

    }
}
</script>

<style scoped>
.center{
    flex: 1;
    background-color: gray;
    font-size: 2rem;
    text-align: center;
    overflow: auto;
}

.quest-form{
    position: relative;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    margin: 30px 0;
    padding: 150px 0;
    background-color: #fff;
    overflow: hidden;
}

.questionList-enter-active,
.questionList-leave-active{
    transition: all .8s;
}
.questionList-enter-from,
.questionList-leave-to{
    opacity: 0;
    transform: translateX(70px);
}

.questionList-move{
    transform: all .8s;
}
</style>